<template>
  <div class="status-bar">
    <el-progress  class="progress" type="circle" :stroke-width="10" :percentage="progress" :width="180" :color="customColors"></el-progress>
    <div class="text">
      <p class="text-info">文件转换进度</p>
      
       <button @click="transfer"  class="add-obj">
          <h3>开始转换</h3>
        </button>

         <button @click="openWindow('todo', 'create')" class="date">
            <h3>查看日志</h3>
          </button>
    </div>
    <edit-todo ref="edit"></edit-todo>
  </div>
</template>

<script>
import EditTodo from "./rundate.vue";

let config = {
               headers:{"Authorization": localStorage.getItem("token")}
           };
export default {
  name: "StatusBar",
  components: {
    EditTodo,
  },
  props:{
    tbData:{
        type:Array
      }
  },
  data() {
    return {
      progress: 0,
      status: "",
      fileData:[],
      customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}],
    };
  },
  created:{
    
  },
  computed: {
    
    },
    
   methods: {
     openWindow(type, action) {
      this.$refs.edit.openWindow(type, action);
      this.$refs.calendar.calendarIsOpen = false;
    },
    //开始转换
    transfer(){

        this.fileData = this.tbData

        


        let intervalList = []


        this.tbData.forEach(element => {
          // console.log(element['id'])
          var t = setInterval(() => {
            this.$axios
            .get('/file/getTransferProcess?fid='+element['id'],config)
            .then(successResponse=>{
                // console.log(element['id'] +":   " +  successResponse.data.msg);
                element['transferProcess'] = parseInt(successResponse.data.msg)
                element['transferStatus'] = parseInt(successResponse.data.msg) == 100 ? 'success' : 'error'
                // console.log(element['name'] +":   " +element['transferProcess'])
                // console.log(element['name'] +":   " +element['transferStatus'])
                // this.$emit('DataChange',this.tbData)
                // console.log(this.tbData)
            })
            this.$emit('DataChange',this.tbData)
          }, 500);

          intervalList.push(t)
        });
        this.$emit('isTransfer',true)

        // console.log("IntervalList: "+intervalList)

        var t = setInterval(() => {
            this.$axios
            .get('/file/getTotalTransferProcess',config)
            .then(successResponse=>{
                // console.log(successResponse.data.msg);
                this.progress = parseInt(successResponse.data.msg)
            })
        }, 500);
        
        this.$axios
        .get('/file/transfer',config)
        .then(successResponse=>{
            // console.log(successResponse.data)
            if(successResponse.data.code == 404){
              clearInterval(t)
              intervalList.forEach(element=>{
              clearInterval(element)
              })
              // this.$emit('isTransfer',false)
              this.$emit('TransferSuccess','success')
              return;
            }
            this.$message.success("文件转换完成")
            clearInterval(t)
            this.progress = 100
            setTimeout(() => {
                this.progress = 0
            }, 5000);
            this.status = "success"
            this.$emit('TransferSuccess','success')

            intervalList.forEach(element=>{
              clearInterval(element)
          })
        })

        

        // setTimeout(() => {
        //   this.$emit('isTransfer',false)
        // }, 3000);

    },
  },
};
</script>

<style scoped>
.status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19rem;
  height: 23rem;
  border-radius: 16px;
  background-color: var(--BG);
}
.progress{
  margin-bottom: 2.5rem;
}

.text-info {
  color: var(--Gray-6);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.5rem;
}
#svg {
  transition: 0.6s ease-in-out;
}
.todo-fg {
  stroke: var(--Theme-6);
}
.clock-in-fg {
  stroke: var(--Vice-Theme);
}

.clock-in-num {
  color: var(--Vice-Theme);
}
.button-box {
  margin-top: 3rem;
  display:inline-flex;
  justify-content: flex-end;
}

.add-obj {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9rem;
  height: 2.5rem;
  border: none;
  color: var(--BG);
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 0.7rem;
  background-color: var(--Theme-6);
  cursor: pointer;
}
.add-obj:hover {
  background-color: var(--Theme-7);
}
.add-obj:active {
  background-color: var(--Theme-8);
}
.date{
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9rem;
  height: 2.5rem;
  border: none;
  color: var(--BG);
  font-size: 0.75rem;
  line-height: 1rem;
  border-radius: 0.7rem;
  background-color:var(--Theme-6);
  cursor: pointer;
}
.date:hover {
  background-color: var(--Theme-7);
}
.date:active {
  background-color: var(--Theme-8);
}
</style>